<template>
  <div class="param-main">
    <el-form ref="tblMain" :model="tblMain" labelPosition="right" inline="" label-suffix=":" label-width="100px">
      <div class="page-pane2">
        <el-button type="primary" size="small" @click="initTableData()">查询</el-button>
        <el-button size="small" type="info" @click="handleAdd()">新增</el-button>
      </div>
    </el-form>
    <div>
      <el-table ref="table" row-key="id" style="margin-top: 10px;" :data="tblMain.items"
        v-loading.body="tblMain.loading" border stripe lazy :load="load"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
        <el-table-column prop="resourceName" width="200" label="资源名称" align="left"></el-table-column>
        <el-table-column prop="resourceType" label="资源类型" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.resourceType == '0'">菜单</span>
            <span v-else-if="scope.row.resourceType == '1'">功能</span>
            <span v-else></span>
          </template>
        </el-table-column>
        <el-table-column prop="parentName" label="上级名称" align="center"></el-table-column>
        <el-table-column prop="resourceUrl" width="250" label="资源路径"></el-table-column>
        <el-table-column prop="resourceModule" width="250" label="组件名称"></el-table-column>
        <el-table-column prop="icon" label="图标" align="center"></el-table-column>
        <el-table-column prop="orderNo" width="100" label="排序" align="center"></el-table-column>
        <el-table-column label="操作" align="center" width="180px">
          <template slot-scope="scope">
            <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
            <el-divider direction="vertical"></el-divider>
            <el-button type="text" @click="deleteRow(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <function-dialog ref="modalForm" @ok="modalFormOk"></function-dialog>
  </div>
</template>
<script>
import FunctionDialog from './components/FunctionDialog'
import tool from '@/tool'
import {
  sysResourceDel,
  sysResourceLazyTree
} from '@/api/index'
export default ({
  name: 'FunctionList',
  components: {
    FunctionDialog
  },
  data() {
    return {
      tblMain: tool.genTableData({
        param: {
          resourceName: ''
        },
        items: []
      }),
    }
  },
  mounted() {
    this.initTableData()
  },
  methods: {
    handleAdd() {
      this.$refs.modalForm.add();
    },
    handleEdit(val) {
      this.$refs.modalForm.edit(val);
    },
    load(tree, treeNode, resolve) {
      sysResourceLazyTree({ parentId: tree.id }).then(res => {
        let data = res.data
        if (data && data.code == 0) {
          resolve(data.data)
        }
      })
    },
    modalFormOk() {
      this.initTableData()
    },
    resetLazyTree() {
      this.$set(this.$refs.table.store.states, "lazyTreeNodeMap", {});
      this.$set(this.$refs.table.store.states, "treeData", {});
      this.$set(this.$refs.table.store.states, "data", []);
    },
    // 批量删除
    async deleteEvent() {
      if (this.tblMain.selection.length == 0) {
        this.$message.warning('请选择数据')
        return
      }
      this.$confirm('确定删除选中数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let params = []
        this.tblMain.selection.forEach((element, index) => {
          params.push(element.id)
        })
        await this.deleteTblMain(params)
      }).catch(() => {
      })
    },
    // 单个删除
    async deleteRow(val) {
      this.$confirm('确定删除该数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let params = []
        params.push(val.id)
        await this.deleteTblMain(params)
      }).catch(() => {
      })
    },
    deleteTblMain(params) {
      let me = this
      me.tblMain.loading = true
      sysResourceDel(params).then(res => {
        me.tblMain.loading = false
        let data = res.data
        if (data && data.code == 0) {
          me.$message.success('删除成功')
          this.initTableData()
        }
      }).catch(() => {
        me.$message.error('请求失败')
        me.tblMain.loading = false
      })
    },
    dataReset() {
      this.tblMain.param.resourceName = ''
      this.initTableData()
    },
    initTableData() {
      let me = this
      this.resetLazyTree();
      let param = {
        resourceName: me.tblMain.param.resourceName,
      }
      me.tblMain.loading = true
      sysResourceLazyTree(param).then(res => {
        me.tblMain.loading = false
        let data = res.data
        if (data && data.code == 0) {
          me.tblMain.items = data.data
        }
      }).catch(() => {
        me.$message.error('请求失败')
        me.tblMain.loading = false
      })
    }
  }
})
</script>
